import Widget from './Widget';

class Slider extends Widget {
    constructor(startingValueParam, labelText, minValue, maxValue, onChangeFN) {
        let startingValue = startingValueParam || 0;
        let template = 
            "<p><label for='slider' class='sliderLabel'></label></p>" +
            "<p><input class='slider' name='slider' value='" + startingValue + "' type='range' min='" + minValue + "' max='" + maxValue + "' step='1'></p>";

        super(template);

        this._labelText = labelText;
        this._onChangeFN = onChangeFN;

        this._setTextOfLabel(startingValue);
        this._watchValueOfSlider();
    }

    _watchValueOfSlider() {
        let sliderElement = this.domNode.getElementsByClassName('slider')[0];
        sliderElement.oninput = function() {
            this._setTextOfLabel(sliderElement.value);

            if (this._onChangeFN) {
                this._onChangeFN.call(null, sliderElement.value);
            }
        }.bind(this);
    }

    _setTextOfLabel(value) {
        let sliderLabelElement = this.domNode.getElementsByClassName('sliderLabel')[0];
        sliderLabelElement.innerText = this._labelText + " (" + value + ")";
    }
}

module.exports = Slider;
